<template>
  <div>
    <div class="header">
      <router-link to="/" tag="div" class="headerLeft">
        <span class="iconfont icon-dayu"></span>
      </router-link>
      <div class="headerMid">
        <span class="iconfont icon-sousuo"></span>
        <span>输入城市/景点/游玩主题</span>
      </div>
      <router-link to="/city" tag="div" class="headerRight">
        德阳
        <span class="iconfont icon-sanjiao_xia"></span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "mainHead"
};
</script>

<style lang="stylus" scoped>
.header {
  height: 0.88rem;
  background-color: rgb(0, 188, 212);
  line-height: 0.88rem;
  color: #ffffff;
  display: flex;

  .headerLeft {
    width: 0.8rem
    text-align: center
    float: left
    cursor pointer
  }

  .headerMid {
    flex: 1;
    height: 0.6rem;
    color: #e4e7ea;
    border-radius: 0.06rem;
    background: #ffffff;
    margin: 0.14rem 0;
    line-height: 0.6rem;
    text-indent: 0.2rem;
  }

  .headerRight {
    width: 1.32rem;
    float: right;
    cursor pointer
    text-align: center;
  }
}
</style> 
